import SiderBase from "./sider"
import React, {Suspense,ReactNode,FC, useState } from 'react';
import { Layout,  theme } from 'antd';
import HeaderBase from "./header";
import { useLocation } from "react-router-dom";

type Iprops = {
  children:ReactNode
}

const LayoutBase: FC<Iprops> = (props) => {
  
  const [collapsed, setCollapsed] = useState(false);
 
  // 改变菜单栏展开收起的状态
  let changeCollapse = () => {
    setCollapsed(!collapsed)
  }

  // 获取layout组件通过组合传递过来的路由元素
  let {children} = props
  // console.log(children)

  // 通过路径来判断  如果访问的是login页面 说明是不需要布局的
  let location = useLocation()
  // console.log(location)

  let excludePage = ['/login']
  // 如果访问的路径在排除列表中，就不需要布局
  if(excludePage.includes(location.pathname)){
    return (
      <Suspense>
          {children}
      </Suspense>
    )
  }else{
    return (
      <Layout>
        <SiderBase collapsed={collapsed} />
        <Layout className="site-layout">
          <HeaderBase collapsed={collapsed} changeCollapse={changeCollapse} />
          <Suspense>
            {children}
          </Suspense>
        </Layout>
      </Layout>
    );
  }
};


export default LayoutBase